<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div class="structure_main">
    <div class="left">
      <div class="return_btn">
        <el-tooltip content="返回"><img :src="back" alt="" @click="goBack" /></el-tooltip>
      </div>
      <el-space v-if="modelList && modelList.length > 0" wrap>
        <el-card class="box-card" style="width: 250px">
          <template #header>
            <div class="card-header">
              <span>模型名称</span>
            </div>
          </template>
          <el-radio-group v-if="hasKeywordSearch" v-model="checkedModel" @change="radioChange">
            <el-radio v-for="model in modelList" :key="model.id" :label="model.id">
              {{model.modelName}}
            </el-radio>
          </el-radio-group>
          <el-checkbox-group v-else v-model="checkedModels" @change="handleChange">
            <el-checkbox v-for="model in modelList" :key="model.id" :label="model.id">{{
              model.modelName
            }}</el-checkbox>
          </el-checkbox-group>
        </el-card>
      </el-space>
      <el-space style="margin-top: 20px;" v-if="dataBaseList && dataBaseList.length > 0" wrap>
        <el-card class="box-card" style="width: 250px">
          <template #header>
            <div class="card-header">
              <span>要素库类型</span>
            </div>
          </template>
          <el-radio-group v-if="hasKeywordSearch" v-model="checkedType" @change="radioChange">
            <el-radio v-for="t in dataBaseList" :key="t.id" :label="t.id">
              {{t.databaseName}}
            </el-radio>
          </el-radio-group>
          <el-checkbox-group v-else v-model="checkedTypes" @change="handleChange">
            <el-checkbox v-for="t in dataBaseList" :key="t.id" :label="t.id">{{
              t.databaseName
            }}</el-checkbox>
          </el-checkbox-group>
        </el-card>
      </el-space>
      <el-space style="margin-top: 20px;" v-if="sceneList && sceneList.length > 0" wrap>
        <el-card class="box-card" style="width: 250px">
          <template #header>
            <div class="card-header">
              <span>业务场景</span>
            </div>
          </template>
          <el-radio-group v-if="hasKeywordSearch" v-model="checkedScene" @change="radioChange">
            <el-radio v-for="t in sceneList" :key="t.id" :label="t.id">
              {{t.name}}
            </el-radio>
          </el-radio-group>
          <el-checkbox-group v-else v-model="checkedScenes" @change="handleChange">
            <el-checkbox v-for="s in sceneList" :key="s.id" :label="s.id">{{
              s.name
            }}</el-checkbox>
          </el-checkbox-group>
        </el-card>
      </el-space>
      <el-space style="margin-top: 20px;" v-if="systemList && systemList.length > 0" wrap>
        <el-card class="box-card" style="width: 250px">
          <template #header>
            <div class="card-header">
              <span>业务系统</span>
            </div>
          </template>
          <el-radio-group v-if="hasKeywordSearch" v-model="checkedSystem" @change="radioChange">
            <el-radio v-for="t in systemList" :key="t.id" :label="t.id">
              {{t.name}}
            </el-radio>
          </el-radio-group>
          <el-checkbox-group v-else v-model="checkedSystems" @change="handleChange"> 
            <el-checkbox v-for="s in systemList" :key="s.id" :label="s.id">{{
              s.name
            }}</el-checkbox>
          </el-checkbox-group>
        </el-card>
      </el-space>
    </div>
    <div class="right">
      <div v-if="!hasKeywordSearch" class="table_div">
        <el-table :data="pageDataList" v-loading="loading" :default-sort = "{prop: 'createTime', order: 'descending'}">
          <el-table-column label="引用模型" sortable align="center" width="150" prop="modelName"></el-table-column>
          <el-table-column label="版本号" sortable align="center" width="150" prop="versionNumber"></el-table-column>
          <el-table-column label="所属业务系统" sortable align="center" prop="systemName" show-overflow-tooltip></el-table-column>
          <el-table-column label="所属业务场景" sortable align="center" prop="sceneName"></el-table-column>
          <el-table-column label="创建人" align="center" prop="createBy"></el-table-column> 
          <el-table-column label="创建时间" align="center" prop="createTime"></el-table-column>
          <el-table-column label="操作" align="center" width="180" fixed="right">
            <template #default="scope">
              <el-button size="small" link type="primary" icon="View" @click="view(scope.row)">查看数据</el-button>
              <!-- <el-button size="small" link type="primary" icon="Download" @click="handleDownload(scope.row)">下载</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="pagenation">
          <el-pagination
            v-show="total > 0"
            layout="prev, pager, next,jumper"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            v-model:current-page="queryParams.pageNum"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <div v-else>
        <div v-for="(tree, index) in dataList" :key="index">
          <MaterialDetail
            v-if="dataAssetType == 'tree'"
            :notInitRequest="true"
            :treeResult="treeResult"
            :canEdit="false"
            :modelId="checkedModel"
          />
          <div v-else-if="dataAssetType == 'table'" class="asset-table">
            <el-table :data="assetTableData" border>
              <el-table-column v-for="td in filterTableColumns(assetTableData[0])" :key="td._index" :label="td.chinese + '(' + td.field + ')'" :prop="td.field" min-width="150" show-overflow-tooltip>
                <template #default="scope">
                  <span>{{ scope.row[td._index]['data'] || '' }}</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagenation">
              <pagination
                v-show="total > 0"
                style="margin-top: 0;height: 38px;"
                v-model:page="tableParams.pageNum"
                v-model:limit="tableParams.pageSize"
                :total="total"
                :background="false"
                layout="total, sizes, prev, pager, next, jumper"
                @pagination="handleCurrentChange1"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="UnifiedSearchList">
import back from '@/assets/images/back.svg';
import {
  getAssetDataList
} from '@/api/material/index.ts';
import MaterialDetail from '@/views/material/component/MaterialDetail';
import { getUnifiedSearchData } from '@/api/unifiedSearch';
const props = defineProps(['type', 'rowData', 'searchItem', 'modelId', 'params', 'tableData', 'modelList', 'sceneList', 'systemList', 'dataBaseList']);
const emits = defineEmits(['handleEvent']);
const loading = ref(false);
// const modelList = ref([]);
const checkedModels = ref([]);
const checkedTypes = ref([]);
const checkedScenes = ref([]);
const checkedSystems = ref([]);
const checkedModel = ref('');
const checkedType = ref('');
const checkedScene = ref('');
const checkedSystem = ref('');
const tableData = ref([]);
const dataList = ref([]);
const pageDataList = ref([]);
const modelList = ref([]);
const sceneList = ref([]);
const systemList = ref([]); 
const dataBaseList = ref([]);
const hasKeywordSearch = ref(false); // 标记是否有关键字筛选
const fieldList = ref([]);
const treeResult = ref([]);
const dataAssetType = ref('');
const assetTableData = ref([]);
const total = ref(0);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});
const tableParams = ref({
  pageNum: 1,
  pageSize: 30,
});
const view = (row) => {
  emits('handleEvent', { 
    component: 'Result', 
    modelId: row.id, 
    dataList: props.tableData,
    modelList: props.modelList,
    sceneList: props.sceneList,
    systemList: props.systemList,
    dataBaseList: props.dataBaseList,
    params: props.params,
    row: props.rowData 
  });
}
const filterTableColumns = (cols) => {
  cols.forEach((item, index) => {
    item._index = index;
  })
  return cols.filter(col => col?.type !== 'info');
}
const goBack = () => {  
  if (props.type == 'LinkFromSearch') {
    emits('handleEvent', { component: 'Entry'});
  } else {
    emits('handleEvent', { component: 'MapDetail', row: props.rowData });
  }
}
const handleChange = () => {
  console.log(checkedModels.value, checkedTypes.value, checkedScenes.value, checkedSystems.value)
  if (checkedModels.value.length > 0 || checkedTypes.value.length > 0 || checkedScenes.value.length > 0 || checkedSystems.value.length > 0) {
    const modelSet = new Set(checkedModels.value);
    const typeSet = new Set(checkedTypes.value);
    const sceneSet = new Set(checkedScenes.value);
    const systemSet = new Set(checkedSystems.value);
    let filterArr = tableData.value;
    filterArr = checkedModels.value.length > 0 ? tableData.value.filter(item => modelSet.has(item.id) || modelSet.has(item.parentConfigId)) : filterArr;
    filterArr = checkedTypes.value.length > 0 ? tableData.value.filter(item => typeSet.has(item.dataBaseTypeId)) : filterArr;
    filterArr = checkedScenes.value.length > 0 ? tableData.value.filter(item => sceneSet.has(item.sceneId)) : filterArr;
    filterArr = checkedSystems.value.length > 0 ? tableData.value.filter(item => systemSet.has(item.systemId)) : filterArr;
    dataList.value = filterArr;
    queryParams.value.pageNum = 1;
    resetDataList();
  } else {
    console.log('tableData', tableData.value);
    queryParams.value.pageNum = 1;
    dataList.value = tableData.value; 
    resetDataList();
  }
} 
const resetDataList = () => {
  total.value = dataList.value.length;
  pageDataList.value = dataList.value.slice((queryParams.value.pageNum - 1) * queryParams.value.pageSize, queryParams.value.pageNum * queryParams.value.pageSize);
}
const handleCurrentChange = (num) => {
  queryParams.value.pageNum = num;
  resetDataList();
};
const handleCurrentChange1 = () => {
  // tableParams.value.pageNum = num;
  queryTreeResult(checkedModel.value);
}
const radioChange = () => {
  if (checkedModel.value 
    || checkedType.value 
    || checkedScene.value
    || checkedSystem.value) {
    const modelSet = checkedModel.value ? [checkedModel.value] : [];
    const typeSet = checkedType.value ? [checkedType.value] : [];
    const sceneSet = checkedScene.value ? [checkedScene.value] : [];
    const systemSet = checkedSystem.value ? [checkedSystem.value] : [];
    let filterArr = tableData.value;
    filterArr = checkedModel.value ? tableData.value.filter(item => modelSet.indexOf(item.modelId) > -1) : filterArr;
    filterArr = checkedType.value ? tableData.value.filter(item => typeSet.indexOf(item.dataBaseTypeId) > -1) : filterArr;
    filterArr = checkedScene.value ? tableData.value.filter(item => sceneSet.indexOf(item.sceneId) > -1) : filterArr;
    filterArr = checkedSystem.value ? tableData.value.filter(item => systemSet.indexOf(item.systemId) > -1) : filterArr;
    // console.log('filterArr', filterArr)
    dataList.value = filterArr;
    queryParams.value.pageNum = 1;
    resetDataList();
    // fieldList.value = filterArr[0].fieldList;
  } else {
    dataList.value = [];
  }
}
const doQuery = () => {  
  loading.value = true;
  props.params.source = ''
  getUnifiedSearchData(props.params).then((res) => {
    if (res.data) {
      loading.value = false;
      tableData.value = res.data.dataList; 
      dataList.value = res.data.dataList;
      queryParams.value.pageNum = 1;
      resetDataList();
      modelList.value = res.data.modelList;
      sceneList.value = res.data.sceneList || [];
      systemList.value = res.data.systemList || [];
      dataBaseList.value = res.data.dataBaseList || [];
      hasKeywordSearch.value && filterDataByKeyword();
    }
  })
  .catch(() => {
    loading.value = false;
  }).finally(() => {
    loading.value = false;
  });
};
// 如果是带关键字筛选，则默认选中每一项第一条数据进行过滤筛选
const filterDataByKeyword = () => {
  checkedModel.value = modelList.value && modelList.value.length > 0 ? modelList.value[0].id : '';
  radioChange();
}

// 初始化检索结果
const queryTreeResult = (modelId) => {
  const treeResult = [];
  getAssetDataList({
    modelId,
    pageNum: tableParams.value.pageNum,
    pageSize: tableParams.value.pageSize,
  }).then(res => {
    dataAssetType.value = res.data.showType;
    if (res.data.showType == 'tree') {
      treeResult.value = res.data?.treeResult;
    } else if (res.data.showType == 'table') {
      assetTableData.value = res.data?.tableResult?.contentData || [];
      total.value = res.data?.tableResult?.totalSize || 0;
    }
  }).finally(() => {
    
  }) 
} 

onMounted(() => {
  hasKeywordSearch.value = !!props.params?.keyWord;
  if (props?.type && props?.type == 'LinkFromMap' && props.params) {
    doQuery();
  } else if (props?.type && props?.type == 'LinkFromSearch') {
    tableData.value = props?.tableData || [];
    dataList.value = props?.tableData || [];
    queryParams.value.pageNum = 1;
    resetDataList();
    modelList.value = props?.modelList || [];
    sceneList.value = props?.sceneList || [];
    systemList.value = props?.systemList || [];
    dataBaseList.value = props?.dataBaseList || [];
    hasKeywordSearch.value && filterDataByKeyword();
    checkedModel.value && queryTreeResult(checkedModel.value);
  }
});
</script>
<style lang="less" scoped>
.structure_main {
  padding-top: 10px;
  font-size: 12px;
  display: flex;
  // height: calc(100vh - 190px);
  // overflow: auto;
  .left {
    // display: flex;
    padding: 50px 20px 20px 20px;
    width: 300px;
    position: relative;
    border-right: 1px solid #ebebeb;
    // padding: 10px;
    // padding-bottom: 20px;
    height: calc(100vh - 110px);
    overflow: auto;
    .return_btn {
      position: absolute;
      top: 0px;
      left: 0px;
      // width: 100%;
      > img {
        height: 45px;
        width: 45px;
        margin-left: 10px;
        cursor: pointer;
      }
    }
    .title {
      font-weight: 600;
    }
    .custom-menu {
      position: absolute;
      background-color: #fff;
      border: 1px solid #ebebeb;
      border-radius: 3px;
      width: 80px;
      z-index: 1000;
      font-size: 12px;
      ul {
        margin: 0;
        padding: 5px 0;
        list-style: none;
        font-size: 12px;
      }
      ul li {
        padding: 3px 15px;
        cursor: pointer;
        font-size: 12px;
        display: flex;
        align-items: center;
      }
      ul li:hover {
        background-color: #eee;
      }
    }
    :deep(.el-tree-node__label) {
      font-size: 12px;
    }
    .custom-tree-node{
      font-size: 12px;
    }
  }
  .right {
    padding: 10px 10px 10px 20px;
    height: calc(100vh - 100px);
    overflow: auto;
    flex: 1;
    .pagenation {
      display: flex;
      justify-content: end;
      padding: 10px;
    }
  }
  .disable{
    color:#d9d9d9;
  }
  .box-card {
    .card-header {
      font-size: 18px;
      font-weight: 600;
    }
    .item {
      padding-bottom: 5px;
      font-size: 14px;
    }
  }
  .el-checkbox-group {
    display: flex;
    flex-direction: column;
  }
}
</style>